<template>
  <view class="page">
    <view class="search">
      <view class="searchin">
        <u-search @search="searchList" placeholder="搜方案" :showAction="false" v-model="query.title"></u-search>
      </view>
      <!-- <view class="login" @login="login">登录</view> -->
    </view>
    <view class="top-nav">
      <u-tabs :list="list1" @click="handleChangeTop" :activeStyle="{
        color: '#F59A23',
      }" :inactiveStyle="{
        color: '#000000',
      }" lineColor="#F59A23" keyName="name"></u-tabs>
    </view>
    <view class="con-top" :style="{ height: !expand ? '340rpx' : 'auto' }" v-if="navId != 2">
      <view class="flex">
        <view :class="{ active: item.checked }" class="flex-item" @click="handleChange(index)"
          v-for="(item, index) in typeArray" :key="item.id">{{ item.title }}</view>
      </view>
      <div class="dashed-border-top"></div>
      <view class="flex">
        <view :class="{ active: item.checked }" class="flex-item" v-for="(item, index) in typeNewArray" :key="item.id"
          @click="handleChangeNew(index)">{{ item.title }}</view>
      </view>
      <div class="dashed-border-top"></div>
      <!-- <view class="flex" v-if="expand">
        <view :class="{ active: active == 2 }" class="flex-item" @click="active = 0" v-for="(item, index) in navList"
          :key="item.name">{{ item.name }}</view>
      </view>
      <div class="dashed-border-top" v-if="expand"></div>
      <view class="flex-center" @click="handleExpand">
        {{ !expand ? "展开" : "收起" }}
        <image src="https://www.atuanjian.com/appletStatic/static/images/u-20.png" mode=""
          :style="{ transform: expand ? 'rotate(270deg)' : 'rotate(90deg)' }" />
      </view> -->
    </view>
    <view class="list">
      <scroll-view scroll-y="true" class="scroll1" :style="{ height: navId != 2 ? '60vh' : '85vh' }"
        @scrolltolower="loadMore">
        <view class="item" v-for="(item, index) in list" :key="index" @click="detail(item)">
          <image :src="showImgApi + item.img" mode="scaleToFill" class="img" />
          <view class="item-bottom">
            <view class="title"> {{ item.title }} </view>
            <!-- <view class="flex-1"> <span>PK竞技</span><span>沉浸体验</span><span>助跑新人</span><span>领导力提升</span> </view> -->
            <!-- <view class="flex-2">
              <image src="https://www.atuanjian.com/appletStatic/static/images/u-39.svg" mode="scaleToFill" />徐奋斗
            </view> -->
          </view>
          <view class="item-1" v-if="navId != 2">
            <view class="type-2" style="font-weight: 400;">
              <!-- <span>vip 免费</span> -->
              ￥{{ item.people_price }}
            </view>
            <view class="item-eys">
              <image src="https://www.atuanjian.com/appletStatic/static/images/u-16.png" mode="scaleToFill" />{{
                item.click }}
              <image src="https://www.atuanjian.com/appletStatic/static/images/u-37.png" mode="scaleToFill"
                style="margin-left: 40rpx" />{{ item.collect }}
              <image src="https://www.atuanjian.com/appletStatic/static/images/u-38.png" mode="scaleToFill"
                style="margin-left: 40rpx" />{{ item.up }}
            </view>
          </view>
          <view class="item-1" style="border: none;" v-else-if="navId == 2">
            <view class="type-2" style="font-weight: 400;">
              <!-- <span>vip 免费</span> -->
              ￥{{ item.people_price }}方案
            </view>
          </view>
        </view>
        <view class="kong"></view>
      </scroll-view>
    </view>
    <view class="fix" @click="handleNav('./plan')">
      <image src="https://www.atuanjian.com/appletStatic/static/images/u-40.png" mode="scaleToFill" />上传方案
    </view>
  </view>
</template>
<script>
import {
  typeList, schemeLists, albumList
} from "@/utils/request.js";
import { onLoad } from "uview-ui/libs/mixin/mixin";
export default {
  data() {
    return {
      active: "",
      expand: false,
      showImgApi: this.$config.showImgApi,
      navList: [
        { name: "经典拓展" },
        { name: "体育运动" },
        { name: "户外探索" },
        { name: "水上体验" },
        { name: "PK竞技" },
        { name: "大型主题" },
        { name: "数字科技" },
        { name: "情景主题" },
        { name: "远征探索" },
        { name: "沉浸体验" },
        { name: "文化艺术" },
        { name: "综艺主题" },
        { name: "军事主题" },
        { name: "野外生存" },
        { name: "企业文化建设" },
      ],
      list1: [
        {
          name: "方案",
          active: 1,
        },
        {
          name: "专辑",
          active: 2,
        },
        {
          name: "免费",
          active: 3,
        },
        // {
        //   name: "积分",
        //   active: 4,
        // },
      ],
      navId: 1,
      list: [],
      total: 0,
      length: 0,
      typeArray: [],
      typeNewArray: [],
      query: { page: 1, limit: 10, price_type: 2, title: '', scheme_type_id: '' }
    };
  },
  onLoad() {
    const data = { pid: 0 }
    this.typeList(data).then(res => {
      let typeArray = res
      typeArray.forEach(element => {
        element.checked = false
      });
      typeArray[0].checked = true
      let pid = typeArray[0].id
      this.query.scheme_type_id = typeArray[0].id
      this.initClassification(pid)
      this.typeArray = typeArray
    })
  },
  methods: {
    async typeList(data) {
      return await typeList(data);
    },
    async schemeLists(data) {
      return await schemeLists(data);
    },
    //专辑列表
    async albumList(data) {
      return await albumList(data);
    },
    initClassification(pid) {
      const data = { pid: pid }
      this.typeList(data).then(res => {
        let typeNewArray = res
        typeNewArray.forEach(element => {
          element.checked = false
        });
        this.typeNewArray = typeNewArray
      })
      this.init()
    },
    handleChange(index) {
      this.typeArray.forEach(element => {
        element.checked = false
      });
      this.typeArray[index].checked = true
      this.query.scheme_type_id = this.typeArray[index].id
      this.total = 0
      this.list = []
      this.initClassification(this.typeArray[index].id)
    },
    //方案列表
    init() {
      this.schemeLists(this.query).then(res => {
        if (res) {
          this.list = [...res.list, ...this.list]
          this.length = this.list.length
          this.total = res.total
        }
      })
    },
    albumList_init() {
      this.albumList(this.query).then(res => {
        if (res) {
          this.list = [...res.list, ...this.list]
          this.length = this.list.length
          this.total = res.total
        }
      })
    },
    handleChangeNew(index) {
      this.typeNewArray.forEach(element => {
        element.checked = false
      });
      this.typeNewArray[index].checked = true
      this.query.scheme_type_id = this.typeNewArray[index].id
      this.total = 0
      this.list = []
      this.init()
    },
    handleNav(url) {
      uni.navigateTo({
        url: url
      })
    },
    handleExpand() {
      this.expand = !this.expand;
    },
    login() {
      uni.navigateTo({
        url: "/pagesB/login/login",
      });
    },
    handleChangeTop(item) {
      this.navId = item.active;
      this.total = 0
      this.list = []
      if (this.navId != 2) {
        this.query.price_type = this.navId === 1 ? 2 : 1
        this.init()
      } else {
        this.albumList_init()
      }
    },
    loadMore() {
      if (this.length < this.total) {
        this.query.page++
        if (this.navId != 2) {
          this.init()
        } else {
          this.albumList_init()
        }
      }
    },
    searchList() {
      this.query.page = 1;
      this.total = 0
      this.list = []
      if (this.navId != 2) {
        this.init()
      } else {
        this.albumList_init()
      }
    },
    detail(item) {
      if (!uni.getStorageSync("userInfo")) {
        uni.showModal({
          title: "提示",
          content: "您未登录，是否登录",
          showCancel: true,
          success: ({ confirm, cancel }) => {
            if (confirm) {
              uni.navigateTo({
                url: "/pagesB/login/login",
              });
            }
          },
        });
      }
      if (this.navId == 1) {
        uni.navigateTo({
          url: "./detail?type=" + 'fa' + '&id=' + item.id,
        });
      } else if (this.navId == 2) {
        uni.navigateTo({
          url: './album?id=' + item.id
        })
      } else if (this.navId == 3) {
        uni.navigateTo({
          url: './detail?type=' + 'free' + '&id=' + item.id,
        })
      } else {
        uni.navigateTo({
          url: './detail?type=' + 'points' + '&id=' + item.id
        })
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.list {
  width: 92%;
  margin: 30rpx auto 0;

  .scroll1 {
    height: 60vh;

    .item {
      width: 100%;
      border-radius: 16rpx;
      overflow: hidden;
      background: #ffffff;
      padding-bottom: 16rpx;
      margin-bottom: 20rpx;

      .img {
        width: 100%;
        height: 370rpx;
      }

      .item-1 {
        width: 92%;
        margin: 0 auto;
        padding-top: 16rpx;
        border-top: 1rpx solid#AAAAAA;
        display: flex;
        justify-content: space-between;

        .item-eys {
          display: flex;
          align-items: center;
          color: #aaaaaa;
          font-size: 20rpx;
          margin-right: 4rpx;

          image {
            width: 23rpx;
            height: 23rpx;
          }
        }

        .type-2 {
          font-size: 25rpx;
          font-weight: bold;

          span {
            background-image: linear-gradient(to right, #f59a23, #f2f2f2);
            font-size: 20rpx;
            font-style: italic;
            margin-right: 20rpx;
            padding: 2rpx 10rpx;
          }
        }
      }

      .item-bottom {
        width: 92%;
        margin: 0 auto;

        .title {
          font-size: 30rpx;
          padding-top: 16rpx;
        }

        .flex-1 {
          margin-top: 10rpx;

          span {
            font-size: 20rpx;
            border-radius: 4rpx;
            background: #facd91;
            color: #b8741a;
            padding: 2rpx 4rpx;
            margin-right: 12rpx;
          }
        }

        .flex-2 {
          margin-top: 10rpx;
          display: flex;
          align-items: center;
          font-size: 20rpx;
          color: #7f7f7f;

          image {
            width: 70rpx;
            height: 70rpx;
            margin-right: 10rpx;
          }
        }
      }
    }
  }
}

.fix {
  width: 125rpx;
  height: 125rpx;
  background: #ffb850;
  font-size: 20rpx;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: fixed;
  top: 50%;
  right: 0;
  margin-top: -62.5rpx;
  flex-direction: column;
  z-index: 99;

  image {
    width: 30rpx;
    height: 39rpx;
    margin-bottom: 4rpx;
  }
}

.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 20rpx;
  background-color: #ffb850;
  padding-bottom: 10rpx;

  .login {
    font-size: 30rpx;
    color: #ffffff;
  }

  .searchin {
    width: 100%;
  }

  image {
    width: 50rpx;
    height: 50rpx;
  }
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  margin-top: 20rpx;
  color: #7f7f7f;

  image {
    width: 13rpx;
    height: 16rpx;
    margin-left: 8rpx;
  }
}

.top-nav {
  width: 100%;
  height: 83rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: center;

  ::v-deep.u-tabs {
    width: 50%;
  }

  ::v-deep.u-tabs__wrapper__nav__item {
    padding: 0 33rpx;
  }
}

.con-top {
  width: 100%;
  padding: 16rpx 0;
  border-top: 1rpx solid#f2f2f2;
  background: #ffffff;
  overflow: hidden;
}

.flex {
  width: 92%;
  display: flex;
  margin-right: 20rpx;
  margin: 0 auto;
  flex-wrap: wrap;

  .active {
    padding: 6rpx 12rpx;
    background: #ffb850;
    color: #ffffff !important;
  }

  .flex-item {
    padding: 6rpx 12rpx;
    border-radius: 32rpx;
    font-size: 25rpx;
    margin-right: 16rpx;
    color: #7f7f7f;
  }
}

.dashed-border-top {
  margin: 16rpx auto;
  border-top: 2px dashed #f2f2f2;
}
</style>
